<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>管理员查看用户权限</title>
    <link rel="stylesheet" type="text/css" href="../assets/global/plugins/select2/select2.css"/>
    <link rel="stylesheet" type="text/css" href="../assets/global/plugins/datatables/plugins/bootstrap/dataTables.bootstrap.css"/>
    <link href="../assets/global/css/components.css" id="style_components" rel="stylesheet" type="text/css"/>
    <link href="../assets/global/css/plugins.css" rel="stylesheet" type="text/css"/>
    <link rel="stylesheet" type="text/css" href="../../css/dataTables.bootstrap.css" />
    <link rel="stylesheet" type="text/css" href="../../css/bootstrap.min.css"/>
    <link href="../../css/style.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="../../js/jquery.min.js"></script>
</head>
<body onload="init()">
<div class="place">
    <span>位置：</span>
    <ul class="placeul">
        <li><a href="#">首页</a></li>
        <li><a href="#">权限管理</a></li>
    </ul>
</div>

<!--toolBar-->
<div class="rightinfo">
    <div class="tools">
        <ul class="toolbar">
            <li id="modifyBtn"><img src="../../images/t02.png" />修改</li>
            <li id="queryBtn"><img src="../../images/search.png" />查询</li>

            <li id="exportBtn"><img src="../../images/export.png" />导出</li>
            <li id="printBtn"><img src="../../images/print.png" />打印</li>
            <li id="sortBtn"><img src="../../images/sort.png" />排序</li>
            <li id="staticBtn" onclick=""><img src="../../images/t04.png" />统计</li>
        </ul>
    </div>

    <div style="position: relative;width: 85%;">
        <table class="table table-striped table-bordered table-hover datatable" id="record_list">
            <thead>
            <tr>
                <th class="table-checkbox"><input type="checkbox" class="group-checkable" data-set="#record_list .checkboxes" /></th>
                <th>用户名</th>
                <th>用户邮箱</th>
                <th>用户权限等级</th>
                <th>注册日期</th>
                <th>最后登录日期</th>
                <th>最后修改日期</th>
                <th>修改权限</th>
            </tr>
            </thead>
        </table>
    </div>

    <!--修改用户权限-->
    <div class="row" id="modifyForm" style="display: none">
        <div class="col-md-12 " style="width: 88%;left: 6px">
            <!-- BEGIN SAMPLE FORM PORTLET-->
            <div class="portlet light bordered">
                <div class="portlet-title">
                    <div class="caption font-green">
                        <i class="icon-pin font-green"></i>
                        <span class="caption-subject bold uppercase" style="width: 200px">修改用户权限</span>
                    </div>
                </div>
                <div class="portlet-body form">
                    <form role="form">
                        <div class="form-body">
                            <div class="form-group form-md-line-input form-md-floating-label" style="position:relative; left: 0; width: 40%; float: left">
                                <label for="Account">用户名(account)</label>
                                <label type="text" class="form-control" id="Account" readonly></label>
                            </div>
                            <div class="form-group form-md-line-input form-md-floating-label" style="position: relative; right: 0; width: 40%; float: right">
                                <label for="Email">用户邮箱(mail)</label>
                                <label type="text" class="form-control" id="Email" readonly></label>
                            </div>
                            <div class="form-group form-md-line-input form-md-floating-label" style="position: relative; left: 0; width: 40%; float:left">
                                <label for="UserLevel">当前用户权限(userLevel)</label>
                                <label type="text" class="form-control" id="UserLevel" readonly></label>
                            </div>
                            <div class="form-group form-md-line-input form-md-floating-label" style="position:relative; right: 0; width: 40%; float:right;">
                                <label for="SignUpDate">注册日期(signUpDate)</label>
                                <label type="text" class="form-control" id="SignUpDate" readonly></label>
                            </div>
                            <div class="form-group form-md-line-input form-md-floating-label" style="position:relative;left: 0; width: 40%; float:left;">
                                <label for="LastLoginDate">最后登录日期(lastLoginDate)</label>
                                <label type="text" class="form-control" id="LastLoginDate" ></label>
                            </div>
                            <div style="height: 60px; width: 100%"></div>

                            <span class="caption-subject bold uppercase" style="position:relative; width: 40%">修改用户权限:</span>
                            <div class="form-group form-md-line-input form-md-floating-label" style="position:relative;width: 100%;">
                                <select class="form-control edited" id="modifyLevel">
                                    <option value="2">普通用户</option>
                                    <option value="1" selected>普通管理员</option>
                                    <option value="0">系统管理员</option>
                                </select>
                            </div>
                        </div>

                        <div class="form-actions noborder">
                            <button type="button" class="btn blue" id="modifySubmit">提交修改</button>
                            <button type="button" class="btn default" id="modifyCancel">取消</button>
                        </div>
                        <div style="height: 100px;"></div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <div class="tip" id="tip">
        <div class="tiptop"><span>导出提示</span><a></a></div>

        <div class="tipinfo">
            <span><img src="../../images/tip.png" /></span>
            <div class="tipright">
                <p id="flag"></p>
                <cite><a href="" id="txtDownLoadHref">[点击下载txt]</a></cite>
                <cite><a href="" id="excelDownLoadHref">[点击下载excel]</a></cite>
            </div>
            <div class="tipright">
                <cite><a href="" id="pdfDownLoadHref">[点击下载pdf]</a></cite>
                <cite><a href="" id="csvDownLoadHref">[点击下载csv]</a></cite>
            </div>
        </div>

        <!--tip中的button-->
        <div class="tipbtn">
            <input name="" type="button" style="visibility: hidden"  class="sure" value="确定" />
            <input name="" type="button" style="position:relative; left: 40%"  class="sure" value="确定" />
        </div>

    </div>

</div>
</body>
<script type="text/javascript" src="../../js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="../../js/jquery.uniform.min.js"></script>
<script type="text/javascript" src="../../js/jquery.dataTables.min.js"></script>
<script>
    // 完成了权限修改，打印，统计，排序，导出.搜索当前采用DataTable
    let resultList=[];
    let sort;

    // 设置全局监听
    function setOnclick(){
        $(".sure").click(function (){
            $(".tip").fadeOut(100);
        });
        // 2.弹窗的取消
        $(".cancel").click(function (){
            $(".tip").fadeOut(100);
        });
        $(".tiptop a").click(function (){
            $(".tip").fadeOut(100);
        });
    }
    // 初始化表格
    function init(){
        // 全局设置监听
        setOnclick();
        resultList=[];
        $('.datatable').dataTable({
            "paging": true,
            "searching": true,
            "destroy":true,
            "oLanguage": {
                "aria": {
                    "sortAscending": ": activate to sort column ascending",
                    "sortDescending": ": activate to sort column descending"
                },
                "sProcessing": "处理中...",
                "sLengthMenu": "_MENU_ 记录/页",
                "sZeroRecords": "没有匹配的记录",
                "sInfo": "显示第 _START_ 至 _END_ 项记录，共 _TOTAL_ 项",
                "sInfoEmpty": "显示第 0 至 0 项记录，共 0 项",
                "sInfoFiltered": "(由 _MAX_ 项记录过滤)",
                "sInfoPostFix": "",
                "sSearch": "查询:",
                "oPaginate": {
                    "sFirst": "首页",
                    "sPrevious": "上页",
                    "sNext": "下页",
                    "sLast": "末页"
                }
            },
            "aoColumns": [{
                "mRender": function (data, type, full) {
                    sReturn = '<input type="checkbox" class="checkboxes" value="' + data + '"/>';
                    return sReturn;
                }, "orderable": false
            }, {
                "mRender": function (data, type, full) {
                    sReturn = "<div>"+full.account+"</div>";
                    return sReturn;
                }, "orderable": true
            }, {
                "mRender": function (data, type, full) {
                    sReturn = "<div>"+full.mail+"</div>";
                    return sReturn;
                }, "orderable": true
            }, {
                "mRender": function (data, type, full) {
                    let level;
                    if(full.userLevel==0){
                        level="系统管理员";
                    }else if(full.userLevel==1){
                        level="普通管理员";
                    }else{
                        level="普通用户";
                    }
                    sReturn = "<div>"+level+"</div>";
                    return sReturn;
                }, "orderable": true
            }, {
                "mRender": function (data, type, full) {
                    sReturn = "<div>"+full.signUpDate+"</div>";
                    return sReturn;
                }, "orderable": true
            },{
                "mRender": function (data, type, full) {
                    sReturn = "<div>"+full.lastLoginDate+"</div>";
                    return sReturn;
                }, "orderable": true
            },{
                "mRender": function (data, type, full) {
                    sReturn = "<div>"+full.lastModifyDate+"</div>";
                    return sReturn;
                }, "orderable": true
            },{
                "mRender": function (data, type, full) {
                    resultList.push(full);
                    sReturn ="<span class='label label-sm label-success'><a style='color: whitesmoke' href='javascript:modifyPermission("+full.id+")'>修改权限</a></span>";
                    return sReturn;
                }, "orderable": false
            }
            ],
            "aLengthMenu": [[5, 10, 15, 20, 25, 40, 50, -1], [5, 10, 15, 20, 25, 40, 50, "所有记录"]],
            "fnDrawCallback": function () {
                $(".checkboxes").uniform();
                $(".group-checkable").uniform();
            },
            "sAjaxSource": "../../Login_ServletAction?Action=getUserRecord&sort="+sort
        });
        $('.datatable').find('.group-checkable').change(function () {
            var set = jQuery(this).attr("data-set");
            var checked = jQuery(this).is(":checked");
            jQuery(set).each(function () {
                if (checked) {
                    $(this).attr("checked", true);
                    $(this).parents('tr').addClass("active");
                } else {
                    $(this).attr("checked", false);
                    $(this).parents('tr').removeClass("active");
                }
            });
            jQuery.uniform.update(set);
        });
        $('.datatable').on('change', 'tbody tr .checkboxes', function () {
            $(this).parents('tr').toggleClass("active");
        });
    }

    // 打印
    document.getElementById("printBtn").onclick=function (){
        window.open("print/printPermission.html");
    }

    // 权限修改
    let pos;
    let oldLevel;
    function modifyPermission(id){
        pos=id;
        for(let i=0;i<resultList.length;i++){
            if(id==resultList[i].id){
                document.getElementById("Account").innerText=resultList[i].account;
                document.getElementById("Email").innerText=resultList[i].mail;
                let level=resultList[i].userLevel;
                oldLevel=level;
                if(level==0){
                   level="系统管理员";
                }else if(level==1){
                    level="普通管理员";
                }else{
                    level="普通用户";
                }
                document.getElementById("UserLevel").innerText=level;
                document.getElementById("SignUpDate").innerText=resultList[i].signUpDate;
                document.getElementById("LastLoginDate").innerText=resultList[i].lastLoginDate;
                break;
            }
        }
        document.getElementById("modifyForm").style.display="block";
        $("html,body").animate({scrollTop:$("#modifyForm").offset().top},1000);
    }

    // 管理员修改用户权限提交修改
    document.getElementById("modifySubmit").onclick=function (){
        let url="../../Login_ServletAction";
        let message={};
        if(document.getElementById("modifyLevel").value==oldLevel){
            alert("尚未修改权限!");
            return;
        }
        message.Action="modifyPermission";
        message.userId=pos;
        message.userLevel=document.getElementById("modifyLevel").value;
        console.log(message);
        if(confirm("您确定要修改该用户的权限吗?")){
            $.post(url,message,function (json){
                if(json.ok==200){
                    alert("修改权限成功！");
                    document.getElementById("modifyForm").style.display="none";
                    init();
                    $("html,body").animate({scrollTop:$("#record_list").offset().top},1000);
                }
            })
        }
    }

    // 取消修改
    document.getElementById("modifyCancel").onclick=function (){
        document.getElementById("modifyForm").style.display="none";
    }

    // 导出用户权限表
    document.getElementById("exportBtn").onclick=function (){
        alert("开始导出");
        let url="../../Login_ServletAction";
        let message={};
        message.Action="exportPermissionInfo";
        message.tag=Math.random();
        console.log(message)
        $.post(url,message,function (json){
            if(json.ok==200){
                alert("导出成功!");
                document.getElementById("flag").innerText="导出成功!";
                $("#txtDownLoadHref").attr("href",json.txtDownloadPath);
                $("#excelDownLoadHref").attr("href",json.excelDownloadPath);
                $("#pdfDownLoadHref").attr("href",json.pdfDownloadPath);
                $("#csvDownLoadHref").attr("href",json.csvDownloadPath);
                document.getElementById("tip").style.display="block";
            }
        })
    }

    // 统计用户权限信息
    document.getElementById("staticBtn").onclick=function (){
        window.location.href="../statistic/statisticPermissionInfo.html";
    }

</script>

</html>